<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import Vue before Element -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>安装程序</title>
</head>

<body>
    <div id="app" class="app">
        <div class="card">
            <div class="tips">
                <h2 class="header">欢迎使用【葫芦科技脚手架系统】</h2>
            </div>
            <div class="message">
                <h2 class="header">系统初始化</h2>
            </div>
            <div class="result">
                <div class="showResult">
                    <el-result icon="success" v-if="success" title="安装成功" subTitle="请根据提示进行操作">
                    </el-result>
                    <el-result icon="warning" v-else title="待安装" subTitle="请点击进行安装">
                    </el-result>
                </div>
                <div>
                    <el-button v-if="success" type="primary" @click="toHome" size="medium">访问首页</el-button>
                    <el-button v-else type="primary" @click="init()">安  装</el-button>
                </div>
            </div>
        </div>
    </div>
    <div>
        {{ $isInstalled }}
    </div>
    <script>
        window.isInstalled = @json($isInstalled);
        console.log(@json($isInstalled))
    </script>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    success: window.isInstalled,
                }
            },
            methods: {
                async init() {
                    
                    await axios.post("http://base.test/bootstrap", {
                        init: true,
                    }).then(({
                        data
                    }) => {
                        this.success = true;
                        console.log(data)
                    })
                },
                toHome() {
                    window.location.href = "http://localhost:8080/auth/login"
                }
            }
        })
    </script>
    <style>
        boy {
            margin: 0;
            padding: 0;
        }

        .app {
            text-align: center;
        }

        .card {
            background-color: #E9EEF3;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
        }

        .message {
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: #3d8df2;
            color: whitesmoke;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-left: red 10px solid;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .tips {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background: linear-gradient(136deg, #184e68, #57ca85);
            color: #ffee6f;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            border-left: red 10px solid;
            box-sizing: border-box;
            border-radius: 3px;
            box-shadow: 1px 1px 5px #3d8df2;
        }

        .showResult {
            min-height: 200px;
        }


        .result {
            display: flex;
            flex-direction: column;
        }
    </style>
</body>

</html>